<script setup lang="ts">
import { computed, h, onBeforeMount, Fragment, ref } from "vue";
// https://plus-pro-components.com/components/form.html
import "plus-pro-components/es/components/form/style/css";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";
import { ElUpload, ElButton, ElImage, ElInput, ElTransfer } from "element-plus";
import { fileToDataURL } from "@plus-pro-components/utils";
import { ElConfigProvider } from "element-plus";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
import plusEn from "plus-pro-components/es/locale/lang/en";

const zhCnLocales = {
  ...zhCn,
  ...plusZhCn
};
const enLocales = {
  ...en,
  ...plusEn
};

const language = ref("zh-cn");
const locale = computed(() =>
  language.value === "zh-cn" ? zhCnLocales : enLocales
);
import { getCorpShowApi, updateCorpApi } from "@/api/enterpriseUserApi";
import { message } from "@/utils/message";
const state = ref<FieldValues>({});

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};
const columns: PlusColumn[] = [
  {
    label: "公司全称",
    width: 120,
    prop: "name",
    valueType: "copy",
    tooltip: "公司全称"
  },
  {
    label: "企业代码(企业统一社会信用代码)",
    width: 200,
    prop: "socialCode",
    valueType: "copy"
  },
  {
    label: "企业简称",
    width: 200,
    prop: "shortName",
    valueType: "copy"
  },
  {
    label: "组织机构代码",
    width: 100,
    prop: "organizationCode",
    valueType: "copy"
  },
  {
    label: "邓白氏编码",
    prop: "dunsNumber",
    valueType: "copy"
  },
  {
    label: "企业类型",
    prop: "businessType",
    valueType: "select",
    options: [
      {
        value: 1,
        label: "合资"
      },
      {
        value: 2,
        label: "独资"
      },
      {
        value: 3,
        label: "国有"
      },
      {
        value: 4,
        label: "私营"
      },
      {
        value: 5,
        label: "全民所有制"
      },
      {
        value: 6,
        label: "集体所有制"
      },
      {
        value: 7,
        label: "股份制"
      },
      {
        value: 8,
        label: "有限责任"
      }
    ]
  },
  {
    label: "纳税人标识",
    prop: "taxIdentifyNumber",
    valueType: "copy"
  },
  {
    label: "企业注册地",
    prop: "registerPlace",
    valueType: "copy"
  },
  {
    label: "企业注册详细地址",
    prop: "registerAddress",
    valueType: "copy"
  },
  {
    label: "法定代表人",
    prop: "legalPerson",
    valueType: "copy"
  },
  {
    label: "企业负责人",
    prop: "principal",
    valueType: "copy"
  },
  {
    label: "企业联系电话",
    prop: "phone",
    valueType: "copy"
  },
  {
    label: "注册资本(万)",
    prop: "registeredCapital",
    valueType: "input-number",
    fieldProps: { precision: 0, step: 1 }
  },
  {
    label: "成立时间",
    prop: "foundDate",
    valueType: "date-picker"
  },
  {
    label: "营业期限",
    prop: "businessTerm",
    valueType: "copy"
  },
  {
    label: "营业期限-是否长期",
    prop: "businessLongTerm",
    valueType: "select",
    options: [
      {
        label: "长期",
        value: 1,
        color: "blue"
      },
      {
        label: "非长期",
        value: 0,
        color: "red"
      }
    ]
  },
  {
    label: "经营范围",
    prop: "businessScope",
    valueType: "textarea",
    colProps: {
      span: 24
    },
    fieldProps: {
      maxlength: 1000,
      showWordLimit: true,
      autosize: { minRows: 2, maxRows: 4 }
    }
  },
  {
    label: "图片",
    prop: "img",
    width: 100,
    valueType: "img",
    renderField(value, onChange) {
      // 自定义上传
      const handleHttpRequest = async ({ file, onError, onSuccess }: any) => {
        try {
          onSuccess(file);
          console.log(file);
        } catch (error: any) {
          onError(error);
        }
        return file;
      };

      return h(Fragment, [
        h(ElImage as any, {
          src: value,
          previewSrcList: [value],
          style: value
            ? {
                width: "60px",
                marginRight: "10px"
              }
            : {}
        }),
        h(
          ElUpload,
          {
            action: action,
            httpRequest: handleHttpRequest,
            onChange: async (data: any) => {
              const value = await fileToDataURL(data.raw);
              // 手动调用 renderField 的onChange 回调把值传给表单
              // console.log(value);
              onChange(value);
            }
          },
          () => h(ElButton, () => "点击上传")
        )
      ]);
    }
  }
];
import { baseUrlApi, baseOaApi } from "@/api/utils";
const action = baseUrlApi + "/uploadFile/upload";
const handleSubmit = (values: FieldValues) => {
  updateCorpApi(values)
    .then()
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
onBeforeMount(() => {
  getCorpShowApi().then(res => {
    state.value = res.result;
  });
});
</script>

<template>
  <div class="main">
    <el-config-provider :locale="locale">
      <PlusForm
        v-model="state"
        class="w-[900px] pt-4 pl-10 pb-2"
        :columns="columns"
        :rules="rules"
        :row-props="{ gutter: 24 }"
        :col-props="{
          span: 12
        }"
        :hasReset="false"
        submitText="保存"
        label-position="top"
        @submit="handleSubmit"
        @submit-error="handleSubmitError"
      />
    </el-config-provider>
  </div>
</template>
<style scoped>
.main {
  background-color: #ffffff;
  margin: 0px 0px 0px !important;
}
</style>
